<template>
  <div>
      <nav-header/>
      <nav-bread>
        <span>
          Goods
        </span>
      </nav-bread>
      <div class="accessory-result-page accessory-page">
        <div class="container">
          <div class="filter-nav">
            <span class="sortby">Sort by:</span>
            <a href="javascript:void(0)" class="default cur">Default</a>
            <a href="javascript:void(0)" class="price" @click="priceSort">Price <svg class="icon icon-arrow-short">
              <use xlink:href="#icon-arrow-short"></use>
            </svg>
            </a>
            <a href="javascript:void(0)" class="filterby stopPop" @click="filterShow()">Filter by</a>
          </div>
          <div class="accessory-result">
            <!-- filter -->
            <div class="filter stopPop" id="filter" v-bind:class="{'filterby-show':filterByShow}">
              <dl class="filter-price">
                <dt>Price:</dt>
                <dd><a href="javascript:void(0)" @click="changePriceChecked('All','All')" v-bind:class="{'cur':priceChecked == 'All'}">All</a></dd>
                <dd v-for="(price,index) in priceFilter">
                  <a href="javascript:void(0)" @click="changePriceChecked(index,price)" v-bind:class="{'cur':priceChecked == index}">{{price.priceStart}} - {{price.priceEnd}}</a>
                </dd>
              </dl>
            </div>

            <!-- search result accessories list -->
            <div class="accessory-list-wrap">
              <div class="accessory-list col-4">
                <ul>
                  <li v-for="item in goodList">
                    <div class="pic">
                      <a href="#"><img v-lazy="'static/'+item.productImage" alt=""></a>
                    </div>
                    <div class="main">
                      <div class="name">{{item.productName}}</div>
                      <div class="price">{{item.salePrice}}</div>
                      <div class="btn-area">
                        <a href="javascript:;" class="btn btn--m" @click="getCartList(item.productId)">加入购物车</a>
                      </div>
                    </div>
                  </li>
                </ul>
                <div v-infinite-scroll="loadMore" class="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="30">
                   <img src="../../static/loading/loading-spokes.svg" v-show="loadMoreImg" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="md-overlay" v-show="overLayFlag" @click="closeOverLay"></div>
      <globalModel v-bind:gMone="showMsg" v-on:fromShowMsg="fromShowMsg">
          <p slot="messageOne">
              {{Notlogged}}
          </p>
          <div slot="modelBtnOne">
              <a class="btn btn--m" href="javascript:;" @click="showMsg=false">关闭</a>
          </div>
      </globalModel>
      <globalModel  v-bind:gMtwo="showCartList" v-on:fromCartList="fromCartList">
          <p slot="message">
          <svg class="icon-status-ok">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
          </svg>
          <span>加入购物车成功!</span>
        </p>
        <div slot="modelBtn">
          <a class="btn btn--m" href="javascript:;" @click="showCartList=false">继续购物</a>
          <router-link class="btn btn--m btn--red" href="javascript:;" to="/cart">查看购物车</router-link>
        </div>
      </globalModel>
      <nav-footer/>
    </div>
</template>
<style scoped>
  .loadMore{
     height: 100px;
     text-align: center;
     line-height: 100px;
   }
</style>
<script>
    import '../assets/css/checkout.css'
    import NavHeader from '../components/hearder.vue'
    import NavFooter from '../components/footer.vue'
    import NavBread from '../components/bread.vue'
    import globalModel from '../components/globalModel.vue'
    import axios from 'axios'
    export default{
        data(){
            return {
              goodList:[],
              priceFilter:[
                {priceStart:0,priceEnd:100},
                {priceStart:100,priceEnd:500},
                {priceStart:500,priceEnd:1000},
                {priceStart:1000,priceEnd:2000},
                {priceStart:2000,priceEnd:5000},
                {priceStart:5000,priceEnd:10000},
              ],
              priceChecked:"All",
              filterByShow:false,
              overLayFlag:false,
              page:1,
              pagesize:8,
              sortFlag:true,
              busy:false,
              priceLevel:"All",
              loadMoreImg:true,
              showCartList:false,
              showMsg:false,
              Notlogged:"",
            }
        },
        components:{
          NavHeader,
          NavFooter,
          NavBread,
          globalModel,
        },
        mounted:function(){
            this.getGoodList();
        },
        watch: {
          'goodList':(goodList)=>{
              this.goodList = goodList;
          }
        },
        methods:{
          getGoodList(flag){
            var param = {
              page:this.page,
              pagesize:this.pagesize,
              sort:this.sortFlag?1:-1,
              priceLevel:this.priceLevel
            }
            axios.get('/api/goods/list',{
              params:param
            }).then((res)=>{
              if(res.data.status == 200){
                if(flag){
                  //证明是分页
                    this.goodList = this.goodList.concat(res.data.result)
                    if(res.data.result.length<this.pagesize){
                        this.busy = true;
                        this.loadMoreImg = false;
                    }else{
                       this.busy = false;
                       this.loadMoreImg = true
                    }
                }else{
                  //证明不是分页
                    this.busy = false;
                    this.goodList = res.data.result;
                    if(res.data.result.length<8){
                        this.busy = true;
                        this.loadMoreImg = false;
                        return false;
                    }
                }
              }else{
                this.goodList = [];
              }
            }).catch((err)=>{
                this.goodList = err;
            })
          },
          filterShow(){
            this.filterByShow = true;
            this.overLayFlag = true;
          },
          changePriceChecked(index,priceLevel){
            this.priceLevel =priceLevel;
            this.priceChecked = index;
            this.closeOverLay();
            this.page = 1;
            this.getGoodList()
          },
          closeOverLay(){
            this.filterByShow = false;
            this.overLayFlag = false;
          },
          priceSort(){
            //分页格式化
            this.page = 1;
            this.sortFlag = !this.sortFlag;
            this.getGoodList();
          },
          loadMore(){
              //第一个请求完成之后再执行之二个
              this.busy = true;
              this.loadMoreImg = true
              setTimeout(() => {
                this.page++;
                this.getGoodList(true)
              }, 500);
          },
          getCartList(productId){
              this.$store.commit('addCartCount',1)
              axios.post('/api/goods/cartList',{
                  'productId':productId
              }).then((doc)=>{
                  if(doc.data.status == 0){
                      this.showCartList = true;
                  }
                  else{
                      this.showMsg = true;
                      this.Notlogged = doc.data.msg;
                  }
              }).catch((err)=>{
                  console.log(err);
              })
          },
          fromCartList(data){
              this.showCartList = data;
          },
          fromShowMsg(data){
              this.showMsg = data;
          }
        }
    }
</script>
